<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<html>
<head>
<title>驾校报名</title>
<script type="text/javascript" src="${path}/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${path}/js/H-ui.js"></script>
<link href="${path}/css/H-ui.css" rel="stylesheet" type="text/css" />
<link href="${path}/css/font/font-awesome.min.css" rel="stylesheet"
	type="text/css" />

<style type="text/css">
body {
	background: url("${path}/images/car1.jpg");
	background-size: 890px;
	background-repeat: no-repeat;
	background-position: right bottom;
}

td:nth-child(odd) {
	height: 30px;
	line-height: 30px;
	text-align: right;
	padding-right: 30px;
}
 #menuBox{
	 width:230px;
	 margin-left:100px;
	/* border:1px solid red;*/
	 
	 }
 
.menuType{
	/* border:1px solid red;*/
 	cursor: pointer;
	position:relative;
	margin-top:10px;
	width:230px;
	height:33px;
	text-align:left;
	padding-left:20px;
	line-height:30px;
	background:url(${path}/images/bg-menu.gif) left center no-repeat;
	color:white;

 }
 div :hover{
 	background-color: red;
 }
 ul{
 	display:none;

 }

.menuType>a{
	color: white;
}

</style>


</head>

<body>
	<div class="pd-20">
		<div class="text-c">
			<span class=" pd-20 f-24">欢迎使用驾校考核管理系统</span>
		</div>


		<div class="pd-40">
			

			<div id='menuBox'>
			<span class=" pd-20 f-24">请选择功能</span>
				<!--这个id属性和class属性是必须按照规范写的这是javascript控制级联菜单的关键属性-->
				<div id="_1" class='menuType'><a href="${path}/regist" >驾校报名</a></div>
				<ul>
					
				</ul>
				<div id="_2" class='menuType'><a href="${path}/gologin?type=1" >学员登录</a></div>
				<ul>
					
				</ul>
				<div id="_3" class='menuType'><a href="${path}/gologin?type=2" >教练登录</a></div>
				<ul>
					
				</ul>
				<div id="_4" class='menuType'><a href="${path}/gologin?type=3" >管理员登录</a></div>
				<ul>
				
				</ul>
			</div>
		</div>

	</div>

	</div>
	<script type="text/javascript">
	 
	  //tag用于记录上一次被点开的节点
	  var tag='0';
	  var isMouseOver=true;
	 $(document).ready(function(){

		//分组节点
		 var menuType=$(".menuType");
		  menuType.mousemove(function(){
			
			if(isMouseOver){
				var nowmenuType=$(this);
				nowmenuType.stop().animate({paddingLeft: '45px'}, '200');			
				}
			  });
		 
			menuType.mouseout(function(){
			  $(this).stop().animate({paddingLeft: '20px'});
		});

		
		menuType.click(function(){
			var node=$(this);
			if(tag!='0'&&tag!=node.attr('id')){
				$('#'+tag).next().slideUp('normal');
			}
			tag=node.attr('id');
			node.next().slideToggle('normal');
			});
	 }
	);
	</script>

</body>

</html>